<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>首页</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/js/bootstrap.bundle.min.js"></script>

</head>
<body>
<!-- 导航栏 -->
<nav class="navbar navbar-expand-sm navbar-dark bg-dark">
  <div class="container-fluid">
    <a class="navbar-brand" href="/hello01">首页</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#mynavbar">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="mynavbar">
      <ul class="navbar-nav me-auto">
        <li class="nav-item">
          <a class="nav-link " href="/index2">元音查询</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="/index3">名字全称</a>
        </li>
            <li class="nav-item dropdown">
              <a class="nav-link dropdown-toggle" href="/goodslist" id="navbardrop" data-bs-toggle="dropdown">
                购物
              </a>
              <div class="dropdown-menu">
                <a class="dropdown-item" href="/goodslist">全部商品</a>
                  <hr class="dropdown-divider">
                <a class="dropdown-item" href="/goodslist">香薰蜡烛</a>
                <a class="dropdown-item" href="/goodslist">香薰套装</a>
                <a class="dropdown-item" href="/goodslist">扩香片</a>
                  <a class="dropdown-item" href="/goodslist">香挂</a>
                  <hr class="dropdown-divider">
                <a class="dropdown-item" href="/login">我的购物车</a>
              </div>
            </li>

      </ul>
      <form class="d-flex">
        <input class="form-control me-2" type="text" placeholder="Search">
        <button class="btn btn-primary" type="button">搜索</button>
      </form>
    </div>
  </div>
</nav>



<!-- 轮播 -->
<div id="demo" class="carousel slide" data-bs-ride="carousel">

   <!-- 指示符 -->
  <div class="carousel-indicators">
    <button type="button" data-bs-target="#demo" data-bs-slide-to="0" class="active"></button>
    <button type="button" data-bs-target="#demo" data-bs-slide-to="1"></button>
    <button type="button" data-bs-target="#demo" data-bs-slide-to="2"></button>
  </div>

  <!-- 轮播图片 -->

  <div class="carousel-inner">
    <div class="carousel-item active">
        <img src="http://r.photo.store.qq.com/psc?/V53CTxeD0fP8dC1ciWHO2ZXtrp2keVgt/45NBuzDIW489QBoVep5mcSHFrgyIa8PuOsc1U*FlAoEPPbJ.K6*AnAtMsMTZ4y3If9AMAXM*wnV7wQL9ELjedXOUK8vhirTy*paXPmY0Kws!/r" class="d-block" style="width:100%">
            <div class="container">
              <div class="carousel-caption text-start">
                <h1 style="color:#000000 ">『提高生活幸福感的小物件』 <span class="badge bg-secondary">New</span></h1>
                  <p style="color:#000000">想知道哪些小物件能提高生活质量吗？快来了解详情吧！<sub>(李佳琪看了都说好)</sub></p>
                <p><a class="btn btn-lg btn-primary" href="/goodslist">OMG!买它！</a></p>
              </div>
             </div>
    </div>
    <div class="carousel-item">
      <img src="http://r.photo.store.qq.com/psc?/V53CTxeD0fP8dC1ciWHO2ZXtrp2keVgt/45NBuzDIW489QBoVep5mcSQLrblARlDjDNSVq4r2DmvgVVpD4G.nTYtfdh7DQkY8vs4c337RGTvlbZfmlHW3U8pYvaJscfSw4LMJqQOAP7A!/r" class="d-block" style="width:100%">
            <div class="container">
              <div class="carousel-caption text-start">
                <h1 style="color:#000000">项目：元音查询</h1>
                <p style="color:#000000">想知道单词中都有哪些元音吗？快试试点击下方按钮吧！</p>
                <p><a class="btn btn-lg btn-primary" href="/index2">点击查询</a></p>
              </div>
             </div>
    </div>
    <div class="carousel-item">
      <img src="http://r.photo.store.qq.com/psc?/V53CTxeD0fP8dC1ciWHO2ZXtrp2keVgt/45NBuzDIW489QBoVep5mcSQLrblARlDjDNSVq4r2DmubN.XRZfX1eXC2b.P.ma.*BIFcwilv2CqKaeteI1Eo1rp2ibNqwELRZ4pwWqyes64!/r" class="d-block" style="width:100%">
            <div class="container">
              <div class="carousel-caption text-start">
                <h1 style="color:#000000">项目：名字全称</h1>
                <p><a class="btn btn-lg btn-primary" href="/index3">点击查询</a></p>
              </div>
             </div>
    </div>
  </div>

  <!-- 左右切换按钮 -->
  <button class="carousel-control-prev" type="button" data-bs-target="#demo" data-bs-slide="prev">
    <span class="carousel-control-prev-icon"></span>
  </button>
  <button class="carousel-control-next" type="button" data-bs-target="#demo" data-bs-slide="next">
    <span class="carousel-control-next-icon"></span>
  </button>
</div>



<div class="container">
  <footer class="py-3 my-4">

    <ul class="nav justify-content-center border-bottom pb-3 mb-3">

    </ul>
    <p class="text-center text-muted">&copy; 2021-2022 Python,莫慧敏</p>
  </footer>
</div>




</body>
</html>